<template>
	<view class="content">
		<tn-nav-bar fixed alpha customBack>
			<view slot="back" @click="goBack" style="line-height: 64rpx;" class="back">
				<text class='tn-icon tn-icon-left font-42 font-weight-800'></text>
			</view>
			<view slot="default">
				<text class="font-32">天天领券</text>
			</view>
		</tn-nav-bar>
		<!-- 背景图 -->
		<view class="bg">
			<image src="../../static/icon/bg.png" mode=""></image>
		</view>
		<view class="coupon">
			<view v-for="(item, index) in couponList" class="">
				<view class="coupon-list d-flex a-center j-sb p-3 m-3 rounded-20" @click="handleSkip(item)">
					<view class="d-flex a-center">
						<view class="coupon-img">
							<image :src="item.path" mode="widthFix"></image>
						</view>
						<view class="ml-26">
							<view class="coupon-title">
								{{ item.title }}
							</view>
							<view class="font-26 coupon-text">
								{{ item.text }}
							</view>
						</view>
					</view>
					<view class="btn">
						<image src="../../static/icon/组 4.png" mode="widthFix">
						</image>
					</view>
					<!-- 只有饿了么显示 -->
					<view v-if="index === 1" class="elm d-flex a-center">
						<view class="">
							饿了么
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		shareMixins
	} from '@/common/share.js'
	import {
		COUPON_LIST
	} from "@/constant/index.js"
	export default {
		mixins: [shareMixins],
		data() {
			return {
				couponList: COUPON_LIST
			}
		},
		onLoad() {},
		methods: {
			// 返回
			goBack() {
				uni.navigateBack()
			},
			// 跳转第三方小程序
			handleSkip(item) {
				console.log('item', item, item.appid, item.skipPath);
				if (uni.getSystemInfoSync().uniPlatform === 'mp-weixin') {
					wx.navigateToMiniProgram({
						appId: item.appid, // 京东小程序的AppID
						path: item.skipPath
					})
				} else {
					uni.showToast({
						title: "不在小程序环境中",
						icon: 'error'
					});
				}
			},
			// 领取优惠券
			// handleReceive(item, index) {
			// 	if (item.isReceive) {
			// 		uni.showToast({
			// 			title: '已领取该优惠券',
			// 			icon: 'none'
			// 		});
			// 		return;
			// 	} else {
			// 		// 更新领取状态
			// 		this.$set(this.couponList, index, {
			// 			...item,
			// 			isReceive: true
			// 		});
			// 		uni.setStorageSync('couponList', JSON.stringify(this.couponList));
			// 	}
			// }
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100vh;
		overflow: auto;

		.bg {
			position: absolute;
			width: 100%;
			height: 100vh;
			z-index: -1 !important;

			.back {
				image {
					width: 50rpx;
					height: 50rpx;
				}
			}

			image {
				width: 100%;
				height: 100%;
			}
		}

		.coupon {
			padding-top: 182rpx;
			z-index: 99;

			.coupon-list {
				position: relative;
				background-color: #fff;

				.coupon-img {
					width: 172rpx;

					image {
						width: 100%;
					}
				}

				.elm {
					position: absolute;
					top: 32rpx;
					left: 50rpx;
					font-size: 12rpx;
					color: #fff;
				}

				.coupon-title {
					font-family: PingFangSC, PingFang SC;
					font-weight: 800;
					font-size: 33rpx;
					color: #010101;
					font-style: normal;
					text-transform: none;
				}

				.coupon-text {
					color: #878787;
				}

				.btn {
					image {
						width: 114rpx;
					}
				}
			}
		}
	}
</style>